<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>化验单_ 三级联动</title>
    <!-- Bootstrap -->
    <link href="__HCSS__bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="__HCSS__reset.css"/>
    <link rel="stylesheet" href="__HCSS__common.css"/>
    <link rel="stylesheet" href="__HCSS__index.css"/>
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script>
        function check(id) {
            var frameSrc = "{:U('hyd/sanjiliandong')}" + "?id=" + id;
            $("#hylx").attr("src", frameSrc);
            $('#hylxModal').modal({show: true, backdrop: 'static'});
        }
    </script>
    <style>
        .select {
            width: 100%;
            /*text-align: center;*/
            vertical-align: middle;
            margin-bottom: 20px;
        }

        .select table {
            margin-bottom: 20px;
            margin-top: 20px;
        }

        table tr td {
            border: 1px solid #dddddd;
            line-height: 30px;
            width: 33%;
        }

        .select .form-control {
            width: 32%;
            display: inline-block;
            margin: 7px 0;
        }

        table {
            width: 100%;
        }

        .table-hover tr td {
            width: 33%;
        }
    </style>


</head>
<body>
<div id="Laboratory" style="width:750px;padding:0 20px;margin:0 auto;"> <!--背景色、边框、阴影-->
    <!--<p>请选择化验类型：</p>-->
<form action="#" method="post" id="myform">
    <div class="select">
        <table>
            <input type="hidden"  value="{$_GET['patient_id']}" name="patient_id">
            <tr>
                <td colspan="3" class="text-left" style="background: #fafafa">
                    <input type="text" value="" name="title" placeholder="请输入检查类型"  id="keywords">
                </td>
            </tr>
            <tr>
                <td colspan="3" class="text-left" style="background: #fafafa">
                    <b style="margin-left: 10px">请选择化验类型:</b>
                </td>
            </tr>
            <tr class="text-center">
                <td colspan="3">
                    <select class="form-control"  onchange="onchangeassaytwo($(this))">
                        <option value="" selected="" disabled="disabled">请选择</option>
                        <volist name="assay" id="v">
                            <option value="{$v.id}">{$v.title}</option>
                        </volist>
                    </select>
                    <select id="two_er" class="form-control"  onchange="onchangeassaythree($(this))">

                </select>
                </td>
            </tr>
            <tr>
                <td colspan="3" class="text-left" style="background: #fafafa"><b style="margin-left: 10px">化验详情</b></td>
            </tr>
            <tr>
                <td colspan="3" style="padding:0 10px" id="assaydatalist"  >

                </td>
            </tr>
        </table>
        <p class="text-center" id="center">
            <button type="button" class="btn btn-success">添加</button>
        </p>
    </div>
    <!--已选的化验项-->

    <table class="table table-bordered text-center table-hover" id="jiancha">
        <thead>

        <tr>
            <th colspan="4" class="text-center"  style="background: #fafafa"><b style="margin-left: 10px">已选择的化验项:</b></th>
        </tr>
        <tr style="background: #f2f2f2">
            <th class="text-center" style="border: 1px solid #dddddd;width: 25%"><b>检验项目</b></th>
            <th class="text-center" style="border: 1px solid #dddddd;width: 25%"><b>日期</b></th>
            <th class="text-center" style="border: 1px solid #dddddd;width: 25%"><b>操作</b></th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <p class="text-center">
        <input type="submit" class="btn btn-success"  value="提交" onclick="addrecorded()">
        <button type="button" class="btn btn-success" id="btndd" >关闭</button>
    </p>
   </form>

</div>
<script src="__HJS__jquery-2.1.1.js"></script>
<script type="text/javascript" src="__HUI__lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="__HUI__lib/layer/2.1/extend/layer.ext.js"></script>
<script src="__HJS__bootstrap.js"></script>
<script>
    var myDate = new Date();
    var year   = myDate.getFullYear();
    var month  = myDate.getMonth() + 1;
    var date   = myDate.getDate();
    var timees = year + "年" + month +"月" + date + "日";
    $(document).on("click", "#center .btn", function () {
        var assay_text = $("#two_er").find("option:selected").text();
        $("#jiancha tbody").prepend(''+
                '<tr>' +
                '<td title="123">'
                +  assay_text +
                '<input type="text" style="display: none" name="assay[]" value="'+assay_text+'" >'+
                '</td>' +
                '<td>'
                 +timees+
                '</td>' +
                '<td><a href="javascript:;" class="btn-xs btn-warning" >删除</a></td>' +
                '</tr>'
                );
    });
    $(document).on("click", "#jiancha tbody td a", function () {
        $(this).parents("tr").remove();
    });
        $("#btndd").click(
                function(){
                    window.parent.$('#hylxModal').modal("hide");
                }
        );
    /**
     * 二级获取数据
     * @param jqObj
     */
    function onchangeassaytwo(jqObj){
        var assay_class_id = jqObj.val();
        var assaycheckBox = $('#two_er');
        assaycheckBox.html('');
        $.ajax({
            url: '{:U("HealthRecord/assaydata")}?assay_class_id=' + assay_class_id,
            type: 'post',
            enctype: 'multipart/form-data',
            success: function (data) {
                $.each(data, function (i, item) {
                  assaycheckBox.append('<option value="' + item.id + '" >' + item.title + '</option>');
                });
            },

        });
        onchangeassaythree(jqObj);
    }
    /**
     * 三级获取数据
     * @param jqObj
     */
    function onchangeassaythree(jqObj){
        var assaythree_class_id = jqObj.val();
        var assaythree = $('#assaydatalist');
            assaythree.html('');
        $.ajax({
            url: '{:U("HealthRecord/assaydata")}?assay_class_id=' + assaythree_class_id,
            type: 'post',
            enctype: 'multipart/form-data',
            success: function (data) {
                $.each(data, function (i, item) {
//                    assaythree.append('<input value="' + item.id + '" >' + item.title + '</option>');
                   var diseaseHtml=" <input type='checkbox' checked   disabled name='disease_id[]' value='"+item.id+"'>"+item.title+"";
                     assaythree.append(diseaseHtml);
                });
            },
        });
    }
    function addtitle() {
        var title=trim($('#keywords').val());
        if(!title){
            layer.msg('请输入化验项目名');
            return false;
        }
    }

    /**
     * ajax提交化验单
     */
    function addrecorded() {
        addtitle();
        var ajaxurl = "{:U('HealthRecord/addRecord')}";
        $.ajax({
            url:ajaxurl,
            data:$('#myform').serialize(),
            type:"Post",
            dataType:"json",
            success:function(data){
                if(data.status==1){
                    window.parent.$('#hylxModal').modal("hide");
                    layer.alert(data['info']);
                    parent.location.reload();
                } else {
                    layer.alert(data['info']);
                }
            }
        });

    }
</script>
</body>
</html>